    <template>
        <!-- 最大盒子 -->
        <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'发薪记录'" :autoBack="true" leftIconColor="$uni-text-color"
        :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
            <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
                <scroll-view v-if="list.length" scroll-y class="comprehensive" @scrolltolower='listScrolltolower'
                show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
                :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
                @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll"> 
                    <view class="list" >
                        <view class="item" v-for="(item,index) in list" :key="index">
                            <view class="flex_top">
                                <view class="item_top">
                                    <text>{{ item.main_remit_sn }}</text>
                                </view>
                                <view @tap="view_details(item)">查看详情 > </view>
                            </view>
                            <view class="item_bottom">
                                <!-- <view class="item_bottom_content">
                                    <text>类型</text>
                                    <view class="yellow">工资</view>
                                </view> -->
                                <view class="item_bottom_content">
                                    <text>金额</text>
                                    <view class="red">{{ item.money }}</view>
                                </view>
                                <!-- <view class="item_bottom_content">
                                    <text>订单号</text>
                                    <view class="yellow">{{ item.main_remit_sn }}</view>
                                </view> -->
                                <view class="item_bottom_content">
                                    <text>审批状态</text>
                                    <!-- <view class="black">{{ item.state_text }}</view> -->
                                    <view class="black">
                                        <view :class="
                                        item.state == 0 ? 'blue' :
                                        item.state == 1 ? 'green' :
                                        item.state == 2 ? 'red' :
                                        item.state == 3 ? 'yellow' :
                                        ''
                                    ">
                                        {{ 
                                            item.state == 0 ? '待审批' :
                                            item.state == 1 ? '已审批' :
                                            item.state == 2 ? '已拒绝' :
                                            item.state == 3 ? '审批中' :
                                            ''
                                        }}
                                        </view>
                                    </view>
                                </view>
                                <view class="item_bottom_content">
                                    <text>打款状态</text>
                                    <view :class="
                                        item.status == 0 ? 'blue' :
                                        item.status == 1 ? 'green' :
                                        item.status == 2 ? 'red' :
                                        item.status == 3 ? 'yellow' :
                                        ''
                                    ">
                                        {{ 
                                            item.status == 0 ? '待转账' :
                                            item.status == 1 ? '全部成功' :
                                            item.status == 2 ? '全部失败' :
                                            item.status == 3 ? '部分成功' :
                                            ''
                                        }}
                                    </view>
                                </view>
                                <view class="remark_box" v-if="item.state == 2">
                                    <view class="remark" >拒绝理由</view>
                                    <view class="memo red">{{ item.reasons }}</view>
                                </view>
                                <view class="item_bottom_content">
                                    <text>创建时间</text>
                                    <view class="blue">{{ formatDatetime(item.createtime) }}</view>
                                </view>
                                <view class="remark_box">
                                    <view class="remark">备注</view>
                                    <view class="memo black">{{ item.memo }}</view>
                                </view>
                            </view>
                        </view>
            
                    </view>
                    <!-- 加载中 && 没有更多数据了 -->
                    <view>
                        <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
                    </view> 
                </scroll-view>
                <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
            </view>
        </s-layout>
    </template>
    <script setup>
        import { baseUrl } from '@/sheep/config';
        import { onLoad, onShow ,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
        import { reactive, ref, computed } from "vue";
        import { formatDatetime } from '@/utils/fn.js';
        import sheep from "@/sheep";
        const userInfo = computed(() => sheep.$store('user').userInfo);
        // 获取系统信息
        const { safeAreaInsets } = uni.getSystemInfoSync();
        const schedule_id = ref()
        onLoad((option) => {
            schedule_id.value = option.id
            getSchedule_remitIndex()
        });
        // 数据
        const loadmoreRef = ref()
        const listPage = ref()
        const listlast_page = ref();
        const listpagenumber = ref(1);
        const list =ref([])
        const getSchedule_remitIndex = async () => {
            let params = {
                schedule_id:schedule_id.value
            }
            const res = await sheep.$api.project.getSchedule_remitIndex(params)
            list.value = [...list.value, ...res?.data.rows]
            listPage.value = res.data.current_page
            listlast_page.value = res.data.last_page
        }
        // 触底刷新
        // 加载更多
        //滚动触底
        const listScrolltolower = () => {
            loadmoreRef.value.PopupScrolltolower()
            if (listPage.value < listlast_page.value) {
                listpagenumber.value += 1 ;
            } else {
                return;
            }
            getSchedule_remitIndex()
        };
        // 页面下拉刷新
        const freshing = ref(false)
        const triggered = ref(false)
        const isOpenRefresh = ref(true)  // 是否开启下拉
        // 自定义下拉刷新控件被下拉
        const onPulling = (e) => {
            if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
            triggered.value = true;
        }
        // 自定义下拉刷新被触发
        const onRefresh = () => {
            if (freshing.value) return;
            freshing.value = true;
            setTimeout(() => {
                listpagenumber.value = 1;
                list.value = []
                triggered.value = false;
                freshing.value = false;
                getSchedule_remitIndex();
            }, 500);
        }
        // 自定义下拉刷新被复位
        const onRestore = () => {
            triggered.value = 'restore'; // 需要重置
            // console.log("onRestore");
        }
        // 自定义下拉刷新被中止
        const onAbort = () => {
            // console.log("onAbort");
        }

        // 查看详情
        const view_details = (item) => {
            sheep.$router.go('/subpackage/staff/user/payroll_record/payroll_record_detail', {
                id: item.id
            })
        }

    </script>

    <style scoped lang="scss">
        .max_box{
            width: calc(100% - 40rpx);
            margin: 20rpx auto;
            .list{
                .item{
                    padding: 20rpx 30rpx;
                    height: auto;
                    border-radius: 16rpx;
                    background-color: #FFFFFF;
                    margin-bottom: 20rpx;
                    box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.05);
                    .item_top{
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        image{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 20rpx;
                        }
                        text{
                            color: #333333;
                            font-weight: 600;
                            font-size: 30rpx;
                        }
                    }
                    .item_bottom{
                        .item_bottom_content{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 60rpx;
                            text{
                                color: #999999;
                                font-weight: 500;
                                font-size: 26rpx;
                            }
                            view{
                                text-align: right;
                                font-weight: 500;
                                font-size: 26rpx;
                                width: 520rpx;
                            }
                        }
                        .remark_box {
                            .remark {
                                color: #999999;
                                font-weight: 500;
                                font-size: 26rpx;
                                height: 60rpx;
                                line-height: 60rpx;
                            }
                            .memo {
                                text-align: left;
                                font-weight: 500;
                                font-size: 26rpx;
                                border-radius: 8px;
                                background-color: #F9FAFF;
                                padding: 30rpx;
                                margin-top: 10rpx;
                            }
                        }
                    }
                }
            }
        }
        .comprehensive {
            height: 87vh;
        }
        .flex_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFangSC;
            color: #0038F7;
            font-weight: 500;
            font-size: 22rpx;
            font-style: normal;
            text-decoration: none;
            text-align: center;
        }
        .yellow{
            color: #FF8F00 !important; 
        }
        .red{
            color: #FF0000 !important; 
        }
        .black{
            color: #333333; 
            display: -webkit-box; /* 显示多行文本容器 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1; /*显示行数*/
            overflow: hidden; /*隐藏多出部分文字*/
            text-overflow: ellipsis; /*用省略号代替多出部分文字*/
        }
        .blue{
            color: #0038F7 !important; 
        }
        .green {
            color: #17A500 !important;
        }
    </style>